<template>
  <view class="notice-list-container">

    <!-- 公告列表 -->
    <scroll-view 
      scroll-y 
      class="notice-scroll" 
      @scrolltolower="loadMore"
      :style="{height: scrollHeight + 'px'}"
    >
      <view class="notice-list">
        <view 
          class="notice-item" 
          v-for="(item, index) in noticeList" 
          :key="index"
          @click="goToDetail(item.id)"
        >
          <view class="notice-title">
            <text class="title-text">{{item.title}}</text>
            <text class="notice-tag" v-if="item.isTop">置顶</text>
          </view>
          <view class="notice-info">
            <text class="info-text">{{item.publishTime}}</text>
            <text class="info-text">浏览 {{item.viewCount}}</text>
          </view>
        </view>
        
        <!-- 加载更多提示 -->
        <view class="load-more">
          <text v-if="loading">加载中...</text>
          <text v-else-if="noMore">没有更多了</text>
          <text v-else>上拉加载更多</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        noticeList: [],
        pageNum: 1,
        pageSize: 10,
        loading: false,
        noMore: false,
        scrollHeight: 0
      }
    },
    onLoad() {
      this.getNoticeList()
      this.calculateScrollHeight()
    },
    onShow() {
      // 页面显示时重新计算高度
      this.calculateScrollHeight()
    },
    methods: {
      // 计算滚动区域高度
      calculateScrollHeight() {
        const systemInfo = uni.getSystemInfoSync()
        const query = uni.createSelectorQuery().in(this)
        query.select('.search-bar').boundingClientRect()
        query.exec(res => {
          const searchBarHeight = res[0].height
          this.scrollHeight = systemInfo.windowHeight - searchBarHeight
        })
      },
      
      // 获取公告列表
      async getNoticeList() {
        if (this.loading || this.noMore) return
        
        this.loading = true
        try {
          // 这里应该是API请求，模拟数据
          const res = await this.mockApiGetNoticeList()
          
          if (this.pageNum === 1) {
            this.noticeList = res.data
          } else {
            this.noticeList = [...this.noticeList, ...res.data]
          }
          
          this.noMore = res.data.length < this.pageSize
          this.pageNum++
        } catch (error) {
          console.error('获取公告列表失败:', error)
          uni.showToast({
            title: '加载失败',
            icon: 'none'
          })
        } finally {
          this.loading = false
        }
      },
      
      // 模拟API请求
      mockApiGetNoticeList() {
        return new Promise(resolve => {
          setTimeout(() => {
            const mockData = []
            const startIndex = (this.pageNum - 1) * this.pageSize
            for (let i = 0; i < this.pageSize; i++) {
              mockData.push({
                id: startIndex + i,
                title: `关于开展${startIndex + i + 1}月份主题党日活动的通知`,
                publishTime: `2023-06-${10 + i}`,
                viewCount: Math.floor(Math.random() * 100),
                isTop: i === 0 && this.pageNum === 1
              })
            }
            resolve({ data: mockData })
          }, 500)
        })
      },
      

      // 加载更多
      loadMore() {
        this.getNoticeList()
      },
      
      // 跳转到详情页
      goToDetail(id) {
        uni.navigateTo({
          url: `/pages/indexOption/noticeDetail?id=${id}`
        })
      }
    }
  }
</script>

<style lang="scss">
  .notice-list-container {
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
    height: 100vh;
  }
  
  .search-bar {
    padding: 20rpx;
    background-color: #fff;
  }
  
  .notice-scroll {
    flex: 1;
  }
  
  .notice-list {
    padding: 0 20rpx;
  }
  
  .notice-item {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
  }
  
  .notice-title {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
  }
  
  .title-text {
    flex: 1;
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .notice-tag {
    font-size: 22rpx;
    color: #fff;
    background-color: #f56c6c;
    padding: 4rpx 12rpx;
    border-radius: 20rpx;
    margin-left: 16rpx;
  }
  
  .notice-info {
    display: flex;
    justify-content: space-between;
  }
  
  .info-text {
    font-size: 24rpx;
    color: #999;
  }
  
  .load-more {
    text-align: center;
    padding: 20rpx 0;
    font-size: 26rpx;
    color: #999;
  }
</style>